//h5 - 联系
import React from "react";
import { useState, useContext, useEffect } from "react";
import { Form, Radio, } from "antd";
import DataContext from "@/store/dataContext";
import { Setting } from "@/store/interface";
import defaultVar from "@/store/default";

//选项类型
type FieldType = Setting;

const App: React.FC = () => {
  //拿到值
  const optionObj = useContext(DataContext) ?? { option: {} };

  //简化并提供默认值
  const publicData = optionObj.option?.setting || defaultVar.option.setting;

  //创建变量并设默认值
  const [formData, setFormData] = useState(publicData);

  //表单同步修改值
  const onValuesChange = (changedValues: Partial<FieldType>) => {
    setFormData((prevFormData) => ({
      ...prevFormData,
      ...changedValues,
    }));
  };

  // 表单值发生变化时更新dataContext的值
  useEffect(() => {
    optionObj.option = {
      ...optionObj.option,
      setting: formData,
    };
  }, [formData]);

  //准备数据
  //插件镜像
  const AppOptions = [
    { label: "官方镜像", value: "official" },
    { label: "文派中国", value: "wenpai" },
    { label: "不加速", value: "false" },
  ];
  //后台加速
  const QuickenOptions = [
    { label: "公共加速", value: "public" },
    { label: "萌芽加速", value: "mengya" },
    { label: "不加速", value: "false" },
  ];
  //初认头像
  const AvatarOptions = [
    { label: "全局启用", value: "all" },
    { label: "国际线路", value: "inter" },
    { label: "不加速", value: "false" },
  ];
  //网页字体
  const FontOptions = [
    { label: "Google加速", value: "google" },
    { label: "中文字体", value: "china" },
    { label: "不加速", value: "false" },
  ];
  //图片素材
  const ImageOptions = [
    { label: "Openverse加速", value: "Openverse" },
    { label: "墨图云集", value: "motu" },
    { label: "不加速", value: "false" },
  ];
  //翻译平台
  const TranslateOptions = [
    { label: "社区翻译", value: "community" },
    { label: "词条回源", value: "entry" },
    { label: "不加速", value: "false" },
  ];
  //广告拦截
  const AdOptions = [
    { label: "智能模式", value: "mind" },
    { label: "手动模式", value: "hand" },
    { label: "不加速", value: "false" },
  ];

  return (
    <>
      <Form
        name="contact"
       
        wrapperCol={{ span: 20 }}
        style={{ maxWidth: 800 }}
        //表单默认值，只有初始化以及重置时生效
        initialValues={publicData}
        //自动填充功能禁用
        autoComplete="off"
        //指定当表单提交时要执行的回调函数
        onFinish={() => {}}
        //指定当表单字段值发生变化时要执行的回调函数
        onValuesChange={onValuesChange}
      >
        <Form.Item<FieldType>
          label="应用市场"
          name="appMarket"
          extra={
            <div className="text-xs">
              <a href="https://www.npc.ink/276746.html?mima" target="_blank">
                官方加速源(WPMirror)
              </a>
              ：直接从 .org 反代至大陆分发；
              <br />
              文派存储库：中国境内自建托管仓库，同时集成文派集市产品更新。
            </div>
          }
        >
          <Radio.Group options={AppOptions}></Radio.Group>
        </Form.Item>
        <Form.Item<FieldType>
          label="后台加速"
          name="quicken"
          extra={
            <div className="text-xs">
              <a href="https://admincdn.com/" target="_blank">
                萌芽加速(adminCDN)
              </a>
              ：将 WordPress
              核心依赖的静态文件切换为公共资源，加快管理后台访问速度。更多细节控制和功能，您可以关注
              adminCDN 项目。
            </div>
          }
        >
          <Radio.Group options={QuickenOptions}></Radio.Group>
        </Form.Item>
        <Form.Item<FieldType>
          label="初认头像"
          name="avatar"
          extra={
            <div className="text-xs">
              <a href="https://cravatar.com/" target="_blank">
                初认头像(Cravatar)
              </a>
              ：是 Gravatar 在中国的完美替代方案，您可以在 https://cravatar.com
              上传头像，更多选项请安装 WPAavatar
              插件。（任何开发者均可在自己的产品中集成该服务，不局限于
              WordPress。）
            </div>
          }
        >
          <Radio.Group options={AvatarOptions}></Radio.Group>
        </Form.Item>
        <Form.Item<FieldType>
          label="网页字体"
          name="web_font"
          extra={
            <div className="text-xs">
              <a href="https://windfonts.com/" target="_blank">
                文风字体(Windfonts)
              </a>
              ：即将为您的网页渲染中文字体并对主题、插件内的 Google
              字体进行加速，目前请只在包含谷歌字体的情况下才启用该选项，以免造成不必要的性能损失。
            </div>
          }
        >
          <Radio.Group options={FontOptions}></Radio.Group>
        </Form.Item>
        <Form.Item<FieldType>
          label="图片素材"
          name="image"
          extra={
            <div className="text-xs">
              <a href="https://motucloud.com/" target="_blank">
                墨图云集(MotuCloud)
              </a>
              ：即将为您的网页渲染中文字体并对主题、插件内的 Google
              字体进行加速，目前请只在包含谷歌字体的情况下才启用该选项，以免造成不必要的性能损失。
            </div>
          }
        >
          <Radio.Group options={ImageOptions}></Radio.Group>
        </Form.Item>
        <Form.Item<FieldType>
          label="翻译平台"
          name="translate"
          extra={
            <div className="text-xs">
              <a href="https://wpfanyi.com/" target="_blank">
                文派翻译(wpfanyi)
              </a>
              获取由文派开源社区用户贡献的 WordPress
              中文翻译文件。（注意，您可能在使用此接口时遇到未知的
              BUG，希望能帮忙反馈） ；
            </div>
          }
        >
          <Radio.Group options={TranslateOptions}></Radio.Group>
        </Form.Item>
        <Form.Item<FieldType>
          label="广告拦截"
          name="ad"
          extra={
            <div className="text-xs">
           
              <a href="https://wp-china-yes.com/ads" target="_blank">
                文派叶子🍃(WP-China-Yes)
              </a>
              独家特色功能，让您拥有清爽整洁的 WordPress
              后台，清除各类常用插件侵入式后台广告、通知及无用信息；启用后若存在异常拦截，请切换为手动模式，查看
              <a href="https://wp-china-yes.com/" target="_blank">
                可优化插件列表
              </a>
              ；
            </div>
          }
        >
          <Radio.Group options={AdOptions}></Radio.Group>
        </Form.Item>
      </Form>
    </>
  );
};

export default App;
